<template>
  <q-page class="cc-admin">
    <div>
      <q-table
        flat
        color="primary"
        class="cross_table my-sticky-header-column-table"
        separator="cell"
        title="锁定演示"
        :data="data"
        :columns="columns"
        row-key="name"
      >
        <template v-slot:header="props">
          <template>
            <q-tr :props="props" v-for="(headList,index) in multipleHeadList" :key="index">
              <q-th
                v-for="head in headList"
                :key="head.name"
                :colspan="head.colSpan"
                :rowspan="head.rowSpan"
                style="border-right-width: 1px;"
              >{{head.name}}</q-th>
            </q-tr>
          </template>
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script>

export default {
  data() {
    return {
      selected: [],
      multipleHeadList: [
        [{ name: '这里是很长很长的表头A', colSpan: 1, rowSpan: 2 }, { name: '这里是很长很长的表头B', colSpan: 1, rowSpan: 2 }, { name: '这里是很长很长的表头C', colSpan: 2, rowSpan: 1 }, { name: '这里是很长很长的表头F', colSpan: 1, rowSpan: 2 }, { name: '这里是很长很长的表头G', colSpan: 1, rowSpan: 2 }, { name: '这里是很长很长的表头H', colSpan: 1, rowSpan: 2 }, { name: '这里是很长很长的表头I', colSpan: 1, rowSpan: 2 }],
        [{ name: '这里是很长很长的表头D', colSpan: 1, rowSpan: 1 }, { name: '这里是很长很长的表头E', colSpan: 1, rowSpan: 1 }],
      ],
      columns: [
        {
          name: 'name',
          required: true,
          label: 'Dessert (100g serving)',
          align: 'left',
          field: (row) => row.name,
          format: (val) => `${val}`,
          sortable: true,
          style: 'width: 180px',
          headerStyle: 'width: 180px',
        },
        {
          name: 'calories',
          align: 'center',
          label: 'Calories',
          field: 'calories',
          sortable: true,
          style: 'width: 180px',
          headerStyle: 'width: 180px',
        },
        {
          name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true,
        },
        {
          name: 'carbs', label: 'Carbs (g)', field: 'carbs', sortable: true,
        },
        {
          name: 'protein',
          label: 'Protein (g)',
          field: 'protein',
          sortable: true,
        },
        {
          name: 'sodium',
          label: 'Sodium (mg)',
          field: 'sodium',
          sortable: true,
        },
        {
          name: 'calcium',
          label: 'Calcium (%)',
          field: 'calcium',
          sortable: true,
          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
        },
        {
          name: 'iron',
          label: 'Iron (%)',
          field: 'iron',
          sortable: true,
          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
        },
      ],

      data: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          sodium: 337,
          calcium: '6%',
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: '3%',
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          sodium: 327,
          calcium: '7%',
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          sodium: 50,
          calcium: '0%',
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          sodium: 38,
          calcium: '0%',
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          sodium: 562,
          calcium: '0%',
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          sodium: 326,
          calcium: '2%',
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          sodium: 54,
          calcium: '12%',
          iron: '6%',
        },
      ],
    };
  },
};
</script>

<style lang="stylus">
.my-sticky-header-column-table
  height 310px
  max-width 600px
  td:first-child, td:nth-child(2)
    background-color #c1f4cd !important
  tr th
    position sticky
    /* higher than z-index for td below */
    z-index 20
    /* bg color is important; just specify one */
    background $primary
  /* 第一行标题头设置为固定顶部 */
  thead tr:first-child > th
    top 0
    z-index 30
  /* 第二行标题头设置为固定顶部  距离顶部48像素 */
  thead tr:nth-child(2) > th
    top 48px
    z-index 30
  tr:first-child > th:first-child
    position sticky
    z-index 40 !important
    left 0
  /* 第二行标题头设置为固定顶部  距离顶部48像素 */
  tr > td:first-child
    position sticky
    z-index 20 !important
    left 0
  tr:first-child > th:nth-child(2)
    position sticky
    z-index 40 !important
    left 160px
  /* 第二行标题头设置为固定顶部  距离顶部48像素 */
  tr > td:nth-child(2)
    position sticky
    z-index 20 !important
    left 160px
</style>
